<!-- 商机详情 -->
<template>
  <div class="nicheDetail">
    <el-card class="card">
      <div
        class="top_nav"
        v-if="pageType === 'details' && customer_status !== '已关闭'"
      >
        <div>
          <p @click="pageType = 'edit'">
            <i class="iconfont icon-bianji1"></i>
            编辑
          </p>
          <!-- <p>
            <i class="iconfont icon-gongxiang"></i>
            共享
          </p> -->
          <p @click="closeNiche">
            <i class="iconfont icon-cuo"></i>
            未成单关闭
          </p>
          <p @click="createContractModal = true">
            <i class="iconfont icon-contract"></i>
            生成合同
          </p>
          <p @click="assignCustomer">
            <i class="iconfont icon-yifenpai"></i>
            分派
          </p>
          <p @click="followCustomerModal = true">
            <i class="iconfont icon-genjin"></i>
            进行跟进
          </p>
        </div>
      </div>
      <div
        class="line"
        v-if="pageType === 'details' && customer_status !== '已关闭'"
      ></div>
      <div class="header_info">
        <div class="header_info_img">
          <img :src="formData.headimgurl" alt="加载失败" />
        </div>
        <div class="header_info_config" style="padding-left: 14px;">
          <p>潜在顾客</p>
          <p>{{ formData.name }}</p>
        </div>
        <div class="header_info_config">
          <p>潜客状态</p>
          <p>{{ customer_status }}</p>
        </div>
        <!-- <div class="header_info_config">
          <p>签约可能性</p>
          <p>10%</p>
        </div> -->
        <div class="header_info_config">
          <p>负责人</p>
          <p>{{ formData.username }}</p>
        </div>
        <div class="save_info" v-if="pageType !== 'details'">
          <!-- <p>
            <i class="iconfont icon-baocun"></i>
            保存
          </p> -->
          <p @click="handleSubmit('nicheManage')">
            <!-- <i class="iconfont icon-close"></i> -->
            保存
          </p>
          <p @click="goToURL('nicheManage')">
            <!-- <i class="iconfont icon-close"></i> -->
            关闭
          </p>
        </div>
      </div>
      <!-- 查看商机页面 -->
      <div class="niche_info" v-if="pageType === 'details'">
        <el-form
          ref="form"
          :model="formData"
          :rules="rules"
          label-width="140px"
        >
          <p class="niche_title">商机信息</p>
          <div class="niche_content">
            <el-form-item label="商机编号：">
              <el-input
                v-model="formData.opportNo"
                style="width: 218px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="潜在顾客：">
              <el-select
                v-model="formData.user_id"
                placeholder="请选择"
                disabled
              >
                <el-option
                  v-for="item in customerList"
                  :key="item.id"
                  :label="item.name"
                  :value="parseInt(item.id)"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="潜客编号：">
              <el-input
                v-model="formData.sno"
                style="width: 218px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="商机来源：">
              <el-select
                v-model="formData.source"
                placeholder="请选择"
                disabled
              >
                <el-option
                  v-for="item in sourceList"
                  :key="item.id"
                  :label="item.name"
                  :value="parseInt(item.id)"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="负责人：">
              <el-input
                v-model="formData.username"
                style="width: 218px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="商机阶段：">
              <el-select
                v-model="formData.opport_status"
                placeholder="请选择"
                disabled
              >
                <el-option
                  v-for="item in nicheStatus"
                  :key="item.label.label"
                  :label="item.label.label"
                  :value="item.label.status"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="最后一次跟进人：">
              <el-input
                v-model="formData.username"
                style="width: 218px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="最后一次跟进时间：">
              <el-input
                v-model="formData.update_time"
                style="width: 218px;"
                disabled
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="分派时间：">
              <el-input v-model="formData.sno" style="width: 218px;" disabled></el-input>
            </el-form-item> -->
            <el-form-item label="创建时间：">
              <el-input
                v-model="formData.create_time"
                style="width: 218px;"
                disabled
              ></el-input>
            </el-form-item>
          </div>
          <!-- <link-details :moduleData="moduleData" :formData="formData" @changeFormData="changeFormData"></link-details> -->
          <p class="niche_title">备注</p>
          <div class="niche_content">
            <div id="remark"></div>
          </div>
        </el-form>
      </div>
      <!-- 新增商机页面 -->
      <div class="niche_info" v-if="pageType === 'create'">
        <el-form
          ref="form"
          :model="formData"
          :rules="rules"
          label-width="120px"
        >
          <p class="niche_title">商机信息</p>
          <div class="niche_content">
            <el-form-item label="商机类型：">
              <el-select v-model="formData.sex" placeholder="请选择">
                <el-option
                  v-for="item in sexList"
                  :key="item.value"
                  :label="item.label"
                  :value="parseInt(item.value)"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="潜在顾客：">
              <el-select v-model="formData.user_id" placeholder="请选择">
                <el-option
                  v-for="item in customerList"
                  :key="item.id"
                  :label="item.name"
                  :value="parseInt(item.id)"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="潜客编号：">
              <el-input
                v-model="formData.no"
                style="width: 218px;"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="商机名称：">
              <el-select v-model="formData.sex" placeholder="请选择">
                <el-option
                  v-for="item in sexList"
                  :key="item.value"
                  :label="item.label"
                  :value="parseInt(item.value)"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商机阶段：">
              <el-select v-model="formData.sex" placeholder="请选择">
                <el-option
                  v-for="item in sexList"
                  :key="item.value"
                  :label="item.label"
                  :value="parseInt(item.value)"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商机来源：">
              <el-select v-model="formData.sex" placeholder="请选择">
                <el-option
                  v-for="item in sexList"
                  :key="item.value"
                  :label="item.label"
                  :value="parseInt(item.value)"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="负责人：">
              <el-select v-model="formData.sex" placeholder="请选择">
                <el-option
                  v-for="item in sexList"
                  :key="item.value"
                  :label="item.label"
                  :value="parseInt(item.value)"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <p class="niche_title">备注</p>
          <link-editor></link-editor>
        </el-form>
      </div>
      <!-- 编辑商机页面 -->
      <div class="niche_info" v-if="pageType === 'edit'">
        <el-form
          ref="form"
          :model="formData"
          :rules="rules"
          label-width="140px"
        >
          <p class="niche_title">商机信息</p>
          <div class="niche_content niche_edit_css">
            <el-row :gutter="2">
              <el-col :span="8">
                <el-form-item label="商机编号：">
                  <el-input
                    v-model="formData.opportNo"
                    style="width: 218px;"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="潜在顾客：">
                  <el-select
                    v-model="formData.user_id"
                    placeholder="请选择"
                    disabled
                  >
                    <el-option
                      v-for="item in customerList"
                      :key="item.id"
                      :label="item.name"
                      :value="parseInt(item.id)"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="潜客编号：">
                  <el-input
                    v-model="formData.sno"
                    style="width: 218px;"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="2">
              <el-col :span="8">
                <el-form-item label="商机来源：">
                  <el-select
                    v-model="formData.source"
                    placeholder="请选择"
                    disabled
                  >
                    <el-option
                      v-for="item in sourceList"
                      :key="item.id"
                      :label="item.name"
                      :value="parseInt(item.id)"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="负责人：">
                  <el-input
                    v-model="formData.username"
                    style="width: 218px;"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商机阶段：">
                  <el-select
                    v-model="formData.opport_status"
                    placeholder="请选择"
                    disabled
                  >
                    <el-option
                      v-for="item in nicheStatus"
                      :key="item.label.label"
                      :label="item.label.label"
                      :value="item.label.status"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="2">
              <el-col :span="8">
                <el-form-item label="最后一次跟进人：">
                  <el-input
                    v-model="formData.username"
                    style="width: 218px;"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="最后一次跟进时间：">
                  <el-input
                    v-model="formData.update_time"
                    style="width: 218px;"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="创建时间：">
                  <el-input
                    v-model="formData.create_time"
                    style="width: 218px;"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- <el-form-item label="分派时间：">
              <el-input v-model="formData.sno" style="width: 218px;" disabled></el-input>
            </el-form-item> -->
          </div>
          <!-- <link-details :moduleData="moduleData" :formData="formData" @changeFormData="changeFormData"></link-details> -->
          <p class="niche_title">备注</p>
          <el-form-item>
            <div class="niche_content" :model="formData.remark">
              <link-editor
                @editor-info="getEditorInfo"
                :editorInfo="formData.remark"
              ></link-editor>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- 生成合同弹框 -->
    <el-dialog
      :visible.sync="createContractModal"
      width="579px"
      class="create_contract"
    >
      <div class="contract_pic">
        <img src="../../assets/images/create_contract.png" alt="生成合同.png" />
        <p>确认要生成合同吗？</p>
      </div>
      <div class="btn">
        <el-button @click="createContractModal = false">取 消</el-button>
        <el-button type="primary" @click="confirmCreateContract"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 未成单关闭弹框 -->
    <el-dialog title="未成单关闭" width="510px" :visible.sync="closeModal">
      <div class="closeModalContent" style="position: relative">
        <p style="margin-bottom: 20px;">关闭原因</p>
        <el-input type="textarea" :rows="5" v-model="closeReason"> </el-input>
        <p
          v-if="noReason"
          style="position: absolute;left: 0;bottom: -23px; color: red;"
        >
          请填写关闭原因
        </p>
      </div>
      <div class="btn">
        <el-button @click="closeModal = false">返回</el-button>
        <el-button type="primary" @click="confirmClose">确认</el-button>
      </div>
    </el-dialog>
    <!-- 跟进弹框 -->
    <el-dialog
      :title="`跟进${formData.name}`"
      :visible.sync="followCustomerModal"
      width="749px"
    >
      <div class="follow_customer">
        <el-form
          ref="followForm"
          :model="followFormData"
          :rules="followRules"
          label-width="150px"
          class="follow_form"
        >
          <el-form-item label="跟进时间" prop="title" width="100%">
            <el-date-picker
              v-model="followFormData.current_time"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="跟进方式" prop="way">
            <el-select v-model="followFormData.way" placeholder="请选择">
              <el-option
                v-for="item in followWay"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="跟进结果" prop="result">
            <el-select v-model="followFormData.result" placeholder="请选择">
              <el-option
                v-for="item in followResult"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="下次跟进时间" prop="next_time">
            <el-date-picker
              v-model="followFormData.next_time"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="跟进主题" prop="title">
            <el-input
              v-model="followFormData.title"
              placeholder="请输入跟进内容"
              type="textarea"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="btn">
        <el-button @click="followCustomerModal = false">取 消</el-button>
        <el-button type="primary" @click="confirmFollow">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="operateTile"
      width="510px"
      :visible.sync="showLatentModal"
      class="latent_modal"
    >
      <!-- 分派潜客 -->
      <div class="content" v-if="operateTile === '分派潜客'">
        <el-input
          class="search_teacher"
          placeholder="请输入内容"
          v-model="searchTeacher"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <div class="radio">
          <div v-for="teacher in teachers" :key="teacher.id">
            <el-radio
              v-model="selectTeacher"
              :label="teacher.id"
              @change="changeAsssign"
              >{{ teacher.name }}</el-radio
            >
          </div>
        </div>
      </div>
      <!-- 分享潜客 -->
      <div class="content" v-if="operateTile === '共享潜客'">
        <el-input
          class="search_teacher"
          placeholder="请输入内容"
          v-model="searchTeacher"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <div class="check">
          <el-checkbox-group
            v-model="checkedTeachers"
            @change="handleCheckedTeachersChange"
            class="teacher_checkbox_group"
          >
            <el-checkbox
              class="teacher_checkbox"
              v-for="teacher in teachers"
              :label="teacher.label"
              :key="teacher.value"
              >{{ teacher.label }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </div>
      <div class="btn">
        <el-button @click="showLatentModal = false">返回</el-button>
        <el-button
          type="primary"
          @click="showLatentModal = false"
          v-if="operateTile === '共享潜客'"
          >确认</el-button
        >
        <el-button
          type="primary"
          @click="confirmAssign"
          v-if="operateTile === '分派潜客'"
          >确认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import http from "@/api/niche";
import customerHttp from "@/api/customer";
import globalApi from "@/api/global";
import studentFollowHttp from "@/api/student_follow";
import sourceHttp from "@/api/source";
import { detailsMinin } from "@/mixin";
import details from "@/components/details";
import editor from "@/components/editor";
import { formatDate, formatArray } from "@/utils";
import { uploadFileURL } from "@/utils/url";
export default {
  name: "nicheDetail",
  mixins: [detailsMinin],
  components: {
    linkEditor: editor,
    linkDetails: details
  },
  data() {
    return {
      http: http,
      closeSign: true,
      uploadFileURL,
      globalApi: globalApi,
      rules: {},
      followRules: {
        title: [{ required: true, message: "请填写主题" }],
        content: [{ required: true, message: "请填写内容" }],
        picarr: [{ required: true, message: "请上传图片" }],
        way: [{ required: true, message: "请选择跟进方式" }],
        result: [{ required: true, message: "请选择跟进结果" }],
        next_time: [{ required: true, message: "请选择下次跟进时间" }]
      },
      formData: {},
      followFormData: {},
      sexList: [],
      pageType: null,
      closeModal: false,
      createContractModal: false,
      followCustomerModal: false,
      showLatentModal: false,
      closeReason: "",
      noReason: false,
      fileList: [],
      customerList: [],
      sourceList: [],
      followFileList: [],
      followResult: [],
      followWay: [],
      operateTile: null,
      teachers: [],
      searchTeacher: null,
      selectTeacher: null,
      nicheStatus: null,
      customer_status: null
    };
  },
  methods: {
    editInfo() {
      this.pageType = "edit";
      console.log(this.formData.remark);
      console.log(this.formData.remark.replace(/<[^>]+>/g, ""));
    },
    getEditorInfo(data) {
      this.formData.remark = data;
    },
    goToURL(name, params) {
      this.$router.push({ name, params });
    },
    closeNiche() {
      this.closeModal = true;
      this.noReason = false;
    },
    // 确认关闭潜客
    confirmClose() {
      if (this.closeReason === "") {
        this.noReason = true;
      } else {
        let params = {
          id: this.formData.id,
          status: "close",
          remark: this.closeReason
        };
        http.editStatus(params).then(res => {
          this.$message.success(res.msg || "关闭成功！");
        });
        this.closeModal = false;
        this.getInfo();
        this.closeSign = false;
      }
    },
    // 切换负责人
    changeAsssign(val) {
      this.teacher_id = val;
    },
    // 分派潜客
    assignCustomer() {
      this.operateTile = "分派潜客";
      this.showLatentModal = true;
    },
    // 确认分派
    confirmAssign() {
      let params = {
        opport_id: this.formData.id,
        teacher_id: this.teacher_id
      };
      http.assignCustomer(params).then(res => {
        this.$message.success(res.msg || "分派成功！");
        this.showLatentModal = false;
        this.getInfo();
      });
    },
    // 确认生成合同
    confirmCreateContract() {
      let user_id = this.formData.user_id;
      http.createContract({ user_id }).then(res => {
        this.createContractModal = false;
        this.$message.success(res.msg || "生成合同成功！");
        this.getInfo();
      });
    },
    handlePreview() {},
    handlePictureSuccess(res, file, fileList) {
      this.followFileList = fileList;
    },
    handleRemove(file, fileList) {
      this.followFileList = fileList;
    },
    // 跟进结果
    getFollowResult() {
      let varname = "follow_result";
      globalApi.getWebConfig({ varname }).then(res => {
        this.followResult = res.data;
      });
    },
    // 跟进方式
    getFollowWay() {
      let varname = "follow_way";
      globalApi.getWebConfig({ varname }).then(res => {
        this.followWay = res.data;
      });
    },
    // 确认跟进
    confirmFollow() {
      this.$refs["followForm"].validate(valid => {
        if (valid) {
          let picarr = [];
          for (let pic of this.followFileList) {
            if (pic.response) {
              picarr.push({
                url: pic.response.data
              });
            } else {
              picarr.push({
                url: pic.url
              });
            }
          }
          this.userData = JSON.parse(sessionStorage.getItem("user"));
          this.followFormData.picarr = JSON.stringify(picarr);
          this.followFormData.user_id = this.pageParams.id;
          this.followFormData.center_id = this.userData.center_id;
          let params = this.followFormData;
          studentFollowHttp.createContent(params).then(res => {
            this.$message.success(res.msg || "新增跟进记录成功！");
            this.followCustomerModal = false;
          });
        }
      });
    },
    getInfo() {
      if (this.pageParams.id) {
        let id = this.pageParams.id;
        http.getContentDetail({ id }).then(res => {
          this.formData = res.data;
          showRemark(this.formData.remark);
          let basicConfig = JSON.parse(sessionStorage.getItem("basicConfig"));
          this.nicheStatus = formatArray(basicConfig.opport_status);
          for (let status of this.nicheStatus) {
            console.log(status, this.formData);
            if (this.formData.opport_status === status.label.status) {
              this.customer_status = status.label.label;
            }
          }
        });
      }
      this.formData.remark = this.editorContent;
    },
    init() {
      let basicConfig = JSON.parse(sessionStorage.getItem("basicConfig"));
      let userData = JSON.parse(sessionStorage.getItem("user"));
      this.sexList = formatArray(basicConfig.sex);
      this.formData.center_id = userData.center_id;
      this.formData.username = userData.username;
      this.getPageParams("nicheDetailParams", () => {
        this.getCommonModuleFields("student");
      });
    }
  },
  created() {
    this.init();
    customerHttp.getList().then(res => {
      this.customerList = res.data.data;
    });
    sourceHttp.getList().then(res => {
      this.sourceList = res.data.data;
    });
    customerHttp.getTeacherList().then(res => {
      this.teachers = res.data.data;
      if (this.formData.teacher_id) {
        for (let teacher of this.teachers) {
          if (teacher.id === this.formData.teacher_id) {
            this.leader = teacher.name;
          }
        }
      }
    });
    this.getFollowResult();
    this.getFollowWay();
  },
  mounted() {
    this.getInfo();
  }
};
function showRemark(html) {
  var remark = document.getElementById("remark");
  remark.innerHTML = html;
  var imgs = remark.getElementsByTagName("img");
  for (let img of imgs) {
    img.style.width = "100px";
  }
}
</script>

<style lang="scss" scoped>
.nicheDetail {
  padding: 10px;
  .card {
    .header_info {
      position: relative;
      padding: 26px 0 45px 34px;
      display: flex;
      &_img {
        width: 47px;
        height: 47px;
        overflow: hidden;
        border-radius: 50%;
        img {
          width: 47px;
          height: 47px;
        }
      }
      &_config {
        padding-left: 26px;
        padding-right: 26px;
        border-right: 1px solid #bfbfbf;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        &:last-of-type {
          border-right: none;
        }
        p {
          &:nth-of-type(1) {
            font-size: 14px;
            color: #565656;
          }
          &:nth-of-type(2) {
            font-size: 20px;
            color: #333;
            font-weight: 600;
          }
        }
      }
      .save_info {
        display: flex;
        position: absolute;
        right: 40px;
        top: 36px;
        p {
          margin-left: 20px;
          border-radius: 5px;
          cursor: pointer;
          &:nth-of-type(1) {
            color: #1799eb;
            padding: 9px 22px;
            background: #e5f4ff;
          }
          &:nth-of-type(2) {
            color: #1799eb;
            padding: 9px 22px;
            background: #e5f4ff;
          }
          // &:nth-of-type(2) {
          //   color: white;
          //   padding: 9px 12px;
          //   background: linear-gradient(to right, #17B5EB, #1796EB)
          // }
        }
      }
    }
    .niche_info {
      .niche_title {
        width: 100%;
        line-height: 41px;
        background: #f5f5f5;
        padding-left: 24px;
        color: #333;
        font-size: 20px;
        font-weight: 600;
      }
      .niche_content {
        padding: 40px 0 44px 24px;
        padding-top: 40px;
        display: flex;
        flex-wrap: wrap;
        /deep/ .el-form-item {
          //   width: 25%;
          font-weight: 600;
        }
      }
    }
    .top_nav {
      padding-left: 34px;
      div {
        display: flex;
        padding: 25px 0;
        p {
          margin-right: 20px;
          color: #565656;
          font-size: 16px;
          cursor: pointer;
          &:hover {
            color: #1796eb;
          }
        }
      }
    }
    .line {
      height: 1px;
      width: 100%;
      background: #bfbfbf;
    }
  }
  .contract_pic {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 191px;
      height: 171px;
    }
  }
  .btn {
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    /deep/ .el-button {
      width: 214px;
    }
  }
  .follow_customer {
    display: flex;
    width: 100%;
    .follow_form {
      width: 100%;
      /deep/ .el-upload-list {
        display: flex;
        li {
          width: 20%;
          margin-right: 10px;
          .el-upload-list__item-name {
            display: none;
          }
        }
      }
      .el-textarea {
        width: 80%;
      }
      .el-input {
        width: 80%;
      }
      .el-select {
        width: 80%;
      }
      /deep/ .el-upload--picture-card {
        border: none;
        line-height: 32px;
        height: 32px;
      }
    }
  }
  .latent_modal {
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      .search_teacher {
        /deep/ .el-input {
          width: 440px;
        }
      }
      .radio {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        max-height: 120px;
        overflow-y: auto;
        div {
          width: 50%;
          height: 40px;
          display: flex;
          align-items: center;
        }
      }
      .check {
        .teacher_checkbox_group {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          max-height: 120px;
          overflow-y: auto;
          /deep/ .el-checkbox {
            margin-right: 0;
          }
          .teacher_checkbox {
            width: 50%;
            height: 40px;
            display: flex;
            align-items: center;
          }
        }
      }
      p {
        &:nth-of-type(1) {
          width: 92px;
          height: 92px;
          border-radius: 50%;
          background: linear-gradient(to bottom, #f25851, #f27350);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 18px;
          i {
            font-size: 40px;
            color: white;
          }
        }
        &:nth-of-type(2) {
          font-size: 20px;
          color: #333;
        }
        &:nth-of-type(3) {
          font-size: 14px;
          color: #999;
          margin-top: 7px;
        }
      }
    }
  }
}
.niche_edit_css {
  .el-row {
    width: 100%;
    .el-form-item {
      width: 100%;
    }
  }
}
</style>
